<template>
  <div class="home">
    <my-header>图书商城</my-header>
    <p class="title" @click="$router.push('/about')">{{$route.query.md?$route.query.md:'根据图书名称搜索'}}</p>
    <ul class="count">
      <li v-for="(item, index) in bookList" :key="index">
        <img :src="item.img" alt="" />
        <p>{{ item.desc }}</p>
        <section>
          <span>{{ item.name }}</span>
          <i class="iconfont icon-jia"></i>
        </section>
      </li>
    </ul>
  </div>
</template>

<script>
import MyHeader from "../components/myHeader.vue";
import axios from "axios";
import { reactive, toRefs } from "vue";
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
export default {
  name: "Home",
  components: {
    MyHeader,
  },
  setup() {
    const route = useRoute();
    const store = useStore();
    const data = reactive({
      bookList: [], // 图书的列表
    });
    axios.get("data.json").then((res) => {
      let txt = route.query.md;
      // console.log(txt);
      if (txt){ // 检索的逻辑
        store.commit('addHistory',txt);
        data.bookList = res.data.filter(item => item.name.includes(txt));
      } else {
        data.bookList = res.data;
      }
      
    });
    return {
      ...toRefs(data),
    };
  },
};
</script>
<style lang="scss" scoped>
.home {
  height: 100%;
}
.title {
  line-height: 40px;
  background: #ccc;
  text-align: center;
}
.count {
  height: calc(100% - 90px);
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: #e9e9e9;
  li {
    width: 49%;
    background: #fff;
    margin-bottom: 10px;
    padding: 10px;
    box-sizing: border-box;
    height: 249px;
    img {
      width: 100%;
      height: 163px;
    }
    p {
      font-size: 12px;
      color: #ccc;
      width: 100%;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    section{
      margin-top: 5px;
      color: cornflowerblue;
      .icon-jia{
        float: right;
      }
    }
  }
}
</style>
